{% load static %}
<aside x-show="mobileSidebarOpen" x-cloak class="md:!block col-span-full md:col-span-1 lg:mr-[20%] order-1 md:order-2"
    x-transition:enter="duration-300 ease-out"
    x-transition:enter-start="opacity-0 -mt-96"
    x-transition:enter-end="opacity-100 mt-0">
    <section class="card p-4">
        <h2>Categories</h2>
        <ul class="hoverlist">
            {% for category in categories %}
            <li class="{% if category.slug == tag.slug %}highlight{% endif %}">
                <a href="{% url 'category' category.slug %}">
                    <img class="w-8 h-8 object-cover mr-2" src="{{ category.image.url }}">
                    <span class="font-bold text-sm">{{ category.name }}</span>
                </a>
            </li>
            {% endfor %}
        </ul>
    </section>
    <section class="card p-4">
        <div class="flex items-center">
            <img class="w-7 mr-2 -mt-3" src="{% static 'images/fireheart_black.svg' %}"/>
            <h2>Top Posts</h2>
        </div>
        <ul class="hoverlist">
            {% for post in top_posts %}
            <li>
                <a href="{% url 'post' post.id %}" class="flex items-stretch justify-between">
                    <div class="flex items-center truncate">
                        <img class="w-10 h-10 rounded-lg object-cover mr-3 shrink-0" src="{{ post.image }}">
                        {% if post.author %}
                        <img class="w-6 h-6 rounded-full object-cover mr-1" src="{{ post.author.profile.avatar }}">
                        <span class="font-bold text-sm mr-1">{{ post.author.username }}</span>
                        {% else %}
                        <img class="w-6 h-6 rounded-full object-cover mr-1" src="{% static 'images/avatar_default.svg' %}">
                        <span class="text-sm mr-1">no author</span>
                        {% endif %}
                    </div>
                    <span class="{% if user in post.likes.all %}font-bold{% else %}font-light{% endif %} text-sm  text-grey-500 shrink-0">{{ post.likes.count }} Like{{ post.likes.count|pluralize:'s' }} / {{ post.comments.count }}</span>
                </a>
            </li>
            {% endfor %}
        </ul>
    </section>
    <section class="card p-4">
        <div class="flex items-center">
            <img class="w-7 mr-2 -mt-3" src="{% static 'images/fireheart_black.svg' %}"/>
            <h2>Top Comments</h2>
        </div>
        <ul class="hoverlist">
            {% for comment in top_comments %}
            <li>
                <a href="{% url 'post' comment.parent_post.id %}" class="flex items-stretch justify-between">
                    <div class="flex items-center truncate">
                        {% if comment.author %}
                        <img class="w-6 h-6 rounded-full object-cover mr-1" src="{{ comment.author.profile.avatar }}">
                        {% else %}
                        <img class="w-6 h-6 rounded-full object-cover mr-1" src="{% static 'images/avatar_default.svg' %}">
                        {% endif %}
                        <span class="font-bold text-sm mr-1 truncate">{% if comment.author %}{{ comment.author.username }}{% else %}<span class="font-light">no author</span>{% endif %} : {{ comment.body|truncatechars:10 }}</span>
                    </div>
                    <span class="{% if user in comment.likes.all %}font-bold{% else %}font-light{% endif %} text-sm text-grey-500 shrink-0">{{ comment.likes.count }} Like{{ comment.likes.count|pluralize:'s' }} / {{ comment.replies.count }}</span>
                </a>
            </li>
            {% endfor %}
        </ul>
    </section>
</aside>
